<template>
    <div class="branc">
        <div class="buts">
            <el-button type="primary" size="mini" v-authCode.show="B_0129" @click="specialVisible = true">查询</el-button>
            <el-button id="bound-template-test-btn_add" type="primary" size="mini" v-authCode.show="B_0128" @click="addTabs('add-bound', '')"
                >新增</el-button
            >
        </div>
        <div class="tables">
            <el-table
                :header-cell-style="{ backgroundColor: '#e8f3ff', padding: '4px 0', 'text-align': 'center' }"
                :cell-style="{ padding: '0' }"
                :row-style="{ height: '35px' }"
                :header-row-style="{ height: '35px', padding: '5px 0' }"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                border
                size="mini"
                height="70vh"
                v-loading="loading"
                @sort-change="handleSort"
            >
                <el-table-column label="模板编码" width="120" prop="templateCode" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span v-if="scope.row.modifyType == '1' && scope.row.modifyStatus == '1'">
                            <i class="el-icon-folder-add" style="color: #52c41a" />{{ scope.row.templateCode }}
                        </span>
                        <span v-else-if="scope.row.modifyType == '2'">
                            <i class="el-icon-setting" style="color: green" />{{ scope.row.templateCode }}</span
                        >
                        <span v-else-if="scope.row.modifyType == '3'">
                            <i class="el-icon-delete" style="color: red" />{{ scope.row.templateCode }}</span
                        >
                        <span v-else> {{ scope.row.templateCode }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="模板名称" prop="templateName" show-overflow-tooltip> </el-table-column>
                <el-table-column label="范围类型" width="120" prop="boundType" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span> {{ DictionConstUtil.BoundType[scope.row.boundType] }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建日期" width="180" prop="createDate" show-overflow-tooltip align="center" sortable="custon">
                    <template slot-scope="scope">
                        {{ dateFormat(scope.row.createDate) }} {{ timeFormat(scope.row.createTime) }}
                    </template>
                </el-table-column>
                <!-- <el-table-column label="创建时间" width="150" prop="createTime" show-overflow-tooltip align="center">
                    <template slot-scope="scope">
                        {{ timeFormat(scope.row.createTime) }}
                    </template>
                </el-table-column> -->
                <el-table-column label="创建者" width="150" prop="createUser" show-overflow-tooltip> </el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <RiskIconButton
                            type="primary"
                            v-authCode="B_0132"
                            icon="el-icon-view"
                            topTitle="查看模板"
                            size="mini"
                            @on-click="looAddTabs(scope.row)"
                        ></RiskIconButton>
                        <RiskIconButton
                            type="primary"
                            v-authCode="B_0131"
                            icon="el-icon-edit"
                            topTitle="编辑模板"
                            size="mini"
                            :disabled="['2', '3'].includes(scope.row.modifyType) || (scope.row.modifyType === '1' && scope.row.modifyStatus === '1')"
                            @on-click="addTabs('edit-bound', scope.row.templateCode)"
                        ></RiskIconButton>
                        <RiskIconButton
                            type="primary"
                            v-authCode="B_0301"
                            icon="el-icon-document-copy"
                            topTitle="复制模板"
                            size="mini"
                            :disabled="scope.row.modifyType === '1' && scope.row.modifyStatus === '1'"
                            @on-click="addTabs('copy-bound', scope.row.templateCode)"
                        ></RiskIconButton>
                        <RiskIconButton
                            type="danger"
                            v-authCode="B_0130"
                            icon="el-icon-delete"
                            topTitle="删除模板"
                            size="mini"
                            :disabled="['2', '3'].includes(scope.row.modifyType) || (scope.row.modifyType === '1' && scope.row.modifyStatus === '1')"
                            @on-click="deleteOne(scope.row)"
                        ></RiskIconButton>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <risk-pagination :paging="paging" @page-change="currentChange"></risk-pagination>
            </div>
        </div>
        <yh-dialog title="查询模板信息" :visible.sync="specialVisible" width="460px" :before-close="closeBound" v-loading="loading" drag>
            <el-form ref="form" label-width="100px" size="mini">
                <el-form-item label="模板编码">
                    <el-input v-model="templateCode" />
                </el-form-item>
                <el-form-item label="模板名称">
                    <el-input v-model="templateName" />
                </el-form-item>
                <el-form-item label="范围类型">
                    <el-select v-model="entryType" clearable style="width: 100%">
                        <el-option
                            v-for="itme in entryTypeList"
                            :key="itme.dictKey"
                            :value="itme.dictKey"
                            :label="itme.dictKey + ' ' + itme.dictKeyName"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="创建日期">
                    <el-date-picker v-model="modifyDate" type="date" format="yyyyMMdd" value-format="yyyyMMdd" size="mini"></el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="closeBound"> 取 消 </el-button>
                <el-button size="mini" @click="resetBoundData"> 重 置 </el-button>
                <el-button size="mini" type="primary" @click="specialClick">确 定 </el-button>
            </div>
        </yh-dialog>
        <yh-dialog drag title="确认删除范围模板" :visible.sync="deleteVisible" width="460px" v-loading="loading">
            <div class="delete">
                {{ deleteValue }}
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="deleteVisible = false"> 取 消 </el-button>
                <el-button size="mini" type="primary" @click="deleteData">确 定 </el-button>
            </div>
        </yh-dialog>
    </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import DictionConstUtil, { SGU_CACHE } from '@/utils/diction-const-util';
import RiskIconButton from '@/common/components/risk-icon-button.vue';
import { mixins } from 'vue-class-component';
import RiskEmitter from '@/common/mixis/risk-emitter.vue';
import { timeFormat, dateFormat } from '@/utils/tools';
import RiskPagination from '@/common/components/risk-pagination.vue';

@Component({
    name: 'ItemBoundTemplate',
    components: {
        RiskIconButton,
        RiskPagination,
    },
})
export default class ItemBoundTemplate extends mixins(RiskEmitter) {
    @Prop() editableTabsValue: any;
    dateFormat = dateFormat;
    timeFormat = timeFormat;
    tableData: any[] = [];
    paging: any = {
        total: 0,
        currentPage: 1,
        totalPage: 0,
        pageSize: 30,
    };
    templateCode: any = '';
    modifyDate: any = '';
    templateName: any = '';
    entryType: any = '';
    loading: boolean = false;
    specialVisible: boolean = false;
    deleteVisible: boolean = false;
    deleteValue: string = '';
    DictionConstUtil: any = DictionConstUtil;
    entryTypeList: any[] = [];
    sort: string = '';
    // 排序字段
    sortableObj = {
        createDate: 'CONCAT(D_CREATE_DATE,D_CREATE_TIME)',
    };

    async mounted() {
        // 风险类型
        this.entryTypeList = DictionConstUtil.PojoToList(DictionConstUtil.BoundType).filter(item => ['1', '2', '3', '4'].includes(item.dictKey));
        this.getSpecialTemplateList(this.paging, this.entryType, this.modifyDate, this.templateCode, this.templateName);
    }

    watchEdittabes() {
        if (this.editableTabsValue == '范围模板') {
            this.getSpecialTemplateList(this.paging, this.entryType, this.modifyDate, this.templateCode, this.templateName);
        }
    }

    // 获取列表数据
    getSpecialTemplateList(paging: any, entryType: any, modifyDate: any, templateCode: any, templateName: any) {
        let datas = {
            paging: paging,
            boundType: entryType,
            entryType: '',
            modifyDate: modifyDate,
            templateCode: templateCode,
            templateName: templateName,
            type: '2',
            sort: this.sort
        };
        this.loading = true;
        this.$axios
            .post('/entry/template/branch/list', datas)
            .then((res: any) => {
                this.loading = false;
                this.tableData = res.list;
                this.paging.total = res.total;
                this.paging.totalPage = res.totalPage;
            })
            .catch(() => {
                this.loading = false;
                this.tableData = [];
                this.paging.total = 0;
                this.paging.totalPage = 0;
            });
    }
    looAddTabs(val: any) {
        if (val.modifyType === '1' && val.modifyStatus == '1') {
            this.addTabs('check-bound', val.templateCode);
        } else {
            this.addTabs('look-bound', val.templateCode);
        }
    }

    closeBound() {
        this.resetBoundData();
        this.specialVisible = false;
    }

    // 重置
    resetBoundData() {
        this.templateCode = '';
        this.modifyDate = '';
        this.templateName = '';
        this.entryType = '';
    }

    // 回调函数
    addTabs(data: any, val: any) {
        let datas: any = {};
        datas.type = data;
        datas.value = val;
        this.dispatch('ItemTemplate', 'addTables', datas);
    }

    // 删除的数据
    deleteOne(val: any) {
        this.deleteVisible = true;
        this.deleteValue = val.templateCode;
    }

    // 删除
    deleteData() {
        this.loading = true;
        this.$axios
            .get('/entry/template/branch/delete/' + this.deleteValue)
            .then(res => {
                this.loading = false;
                this.deleteVisible = false;
                this.yh_message_success('删除成功');
                this.getSpecialTemplateList(this.paging, this.entryType, this.modifyDate, this.templateCode, this.templateName);
            })
            .catch(() => {
                this.loading = false;
            });
    }

    // 翻页
    currentChange() {
        this.getSpecialTemplateList(this.paging, this.entryType, this.modifyDate, this.templateCode, this.templateName);
    }

    // 查询
    specialClick() {
        this.specialVisible = false;
        this.getSpecialTemplateList(this.paging, this.entryType, this.modifyDate, this.templateCode, this.templateName);
    }
    handleSort(column): void {
        let sortType = column.order == 'ascending' ? 'ASC' : column.order == 'descending' ? 'DESC' : '';
        if (sortType) {
            this.sort = this.sortableObj[column.prop] + ' ' + sortType;
        } else {
            this.sort = '';
        }
        this.paging.currentPage = 1;
        this.getSpecialTemplateList(this.paging, this.entryType, this.modifyDate, this.templateCode, this.templateName);
    }
}
</script>
<style lang="scss" scoped>
.branc {
    color: #222;
    height: calc(100vh - 50px);
    padding: 10px;

    .buts {
        width: calc(100vw - 20px);
        border: 1px solid #eee;
        padding: 10px;
    }

    .tables {
        margin-top: 10px;
        width: calc(100vw - 20px);
        height: calc(100vh - 140px);
        border: 1px solid #eee;
        padding: 10px;
    }

    .delete {
        padding: 20px 10px;
    }
}
</style>
